<script setup>
import { reactive,ref,getCurrentInstance } from 'vue';
import {onLoad,onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
import {reqOrdersList} from '../api/orders.js'
const pages = reactive({
	page:1,
	limit:6
})
onLoad(async()=>{
	await getOrdersList()
})
const orderList = ref([])
const ordersTotal = ref(0)
const getOrdersList = async()=>{
	const resOrders = await reqOrdersList(pages.page,pages.limit)
	// console.log(resOrders)
	orderList.value.push(...resOrders.data.records)
	ordersTotal.value = resOrders.total	
}
const {proxy} = getCurrentInstance()
onReachBottom(async()=>{
	if(orderList.value.length===ordersTotal.value){
		proxy.$toast({title:'没有更多了'})
		return
	}
	pages.page++
	await getOrdersList()
})
onPullDownRefresh(async()=>{
	pages.page=1
	pages.limit=6
	orderList.value=[]
	await getOrdersList()
	uni.stopPullDownRefresh()
})
</script>

<template>
	<view class="order-list">
		<view class="order-item" v-for="item in orderList" v-bind:key="item.id">
			<view class="t">
				<view class="order-number">
					订单号  {{item.orderNo}}
				</view>
				<view class="pay-status">
					{{item.paymentWay===1?'已支付':'未支付'}}
				</view>
			</view>
			<view class="goods-detail" v-for="item in item.orderDetailList" v-bind:key="item.id">
				<image :src="item.imageUrl" class="img"></image>
				<view class="r">
					<view class="goods-name-intro">
						<view class="name">{{item.name}}</view>
						<view class="intro">{{item.blessing}}</view>
					</view>
					<view class="price-count">
						<view class="price">￥{{item.price}}</view>
						<view class="count">x{{item.count}}</view>
					</view>
				</view>
			</view>
			<view class="total-sum">
				实付 <text class="price">￥{{item.totalAmount}}</text>
			</view>
		</view>
		<view class="loading-more" v-show="orderList.length>0&&!(orderList.length===ordersTotal)">
			下滑加载更多~
		</view>
	</view>
</template>

<style lang="scss" scoped>
.order-list{
	padding:20rpx 20rpx 1rpx 20rpx;
	.order-item{
		background: white;
		margin-bottom: 16rpx;
		padding: 16rpx;
		border-radius: 30rpx;
		.t{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 26rpx;
			.pay-status{
				color: #75ca34;
			}
		}
		.goods-detail{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.img{
				width: 200rpx;
				height: 220rpx;
			}
			.r{
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-left: 16rpx;
				.goods-name-intro{
					.name{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.intro{
						color: #acacac;
						overflow: hidden;
						text-overflow: ellipsis;
						
					}
				}			
				.price-count{
					.price{
						color: #2ccc08;
						margin-bottom: 16rpx;
					}
					.count{
						color: #acacac;
						text-align: right;
					}
				}
			}
		}
		.total-sum{
			text-align: right;
			.price{
				font-size: 36rpx;
				color: #f3514f;
				font-weight: bold;
			}
		}
	}
	.loading-more{
		text-align: center;
		color: #afafaf;
		font-size: 24rpx;
		background: white;
		padding: 10rpx 0;
		border-radius: 30rpx;
		margin-bottom: 16rpx;
	}
}
</style>
